<template>
  <el-dialog
    :model-value="dialogVisible"
    :destroy-on-close="true"
    :title="dialogTitle"
    width="600px"
    @close="emits('closeDialog')"
  >
    <el-form
      ref="dialogFormRef"
      :model="dialogForm"
      :label-width="formLabelWidth"
      :rules="rules"
    >
      <el-form-item label="商户ID" prop="merchant_id">
        <el-input v-model="dialogForm.merchant_id" placeholder="请输入商户ID" />
      </el-form-item>
      <el-form-item label="币种" prop="currency">
        <el-select
          v-model="dialogForm.currency"
          placeholder="请选择币种"
          clearable
          multiple
          style="width: 100%"
        >
          <el-option
            v-for="item in currencyList"
            :key="item.name"
            :label="item.alias"
            :value="item.name"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="付款费率" prop="pay_rate">
        <el-input v-model="dialogForm.pay_rate" type="number" />
      </el-form-item>
      <el-form-item label="付款手续费扣除方式" prop="pay_fee_type">
        <el-select
          v-model="dialogForm.pay_fee_type"
          placeholder="请选择扣除方式"
          clearable
          style="width: 100%"
        >
          <el-option label="订单金额" :value="0" />
          <el-option label="账户余额" :value="1" />
          <el-option label="实际出款金额" :value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="充值手续费率" prop="recharge_rate">
        <el-input v-model="dialogForm.recharge_rate" type="number" />
      </el-form-item>
      <el-form-item label="充值手续费计算方式" prop="recharge_fee_type">
        <el-select
          v-model="dialogForm.recharge_fee_type"
          placeholder="请选择扣除方式"
          clearable
          style="width: 100%"
        >
          <el-option label="订单金额" :value="0" />
          <el-option label="实际到账金额" :value="1" />
        </el-select>
      </el-form-item>
      <el-form-item label="充值入账金额计算方式" prop="deposit_amount_type">
        <el-select
          v-model="dialogForm.deposit_amount_type"
          placeholder="请选计算方式"
          clearable
          style="width: 100%"
        >
          <el-option label="订单金额" :value="0" />
          <el-option label="实际到账金额" :value="1" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="emits('cancel')">取消</el-button>
        <el-button
          type="primary"
          @click="submit(dialogForm)"
          :loading="btnLoading"
          >提交</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import { onMounted, ref } from "vue";
import { assetsCurrencyApi } from "@/api/ExAssistant/settings";
const dialogFormRef = ref(null);
const currencyList = ref([]);

defineProps({
  dialogVisible: {
    type: Boolean,
    default: false,
  },
  dialogForm: {
    type: Object,
    default: {
      id: "",
      merchant_id: "",
      pay_rate: "",
      pay_fee_type: "",
      recharge_fee_type: "",
      deposit_amount_type: "",
      recharge_rate: "",
      currency: [],
    },
  },
  btnLoading: {
    type: Boolean,
    default: false,
  },
  dialogTitle: {
    type: String,
    default: "",
  },
});
const emits = defineEmits(["closeDialog", "cancel", "submitForm"]);

const formLabelWidth = "160px";

const checkPayRate = (rule, value, callback) => {
  if (!value) {
    return callback(new Error("请输入付款费率"));
  }
  //   将输入的值转换为浮点数;
  const floatValue = parseFloat(value);
  // 验证是否为小数且在0到1之间
  if (!isNaN(floatValue) && floatValue >= 0 && floatValue <= 1) {
    return callback(); // 验证通过
  } else {
    return callback(new Error()); // 验证不通过，传递一个错误对象
  }
};

const rules = {
  merchant_id: [
    {
      required: true,
      message: "请输入商户ID",
      trigger: "change",
    },
  ],
  currency: [
    {
      required: true,
      message: "请选择币种",
      trigger: "change",
    },
  ],
  pay_rate: [
    {
      required: true,
      message: "请输入付款费率",
      trigger: "blur",
    },
    {
      validator: checkPayRate,
      message: "请输入介于0和1之间的小数",
      trigger: "change", // 在失去焦点时进行验证，可以根据需要修改
    },
  ],
  pay_fee_type: [
    {
      required: true,
      message: "请选择付款手续费扣除方式",
      trigger: "change",
    },
  ],
  recharge_rate: [
    {
      required: true,
      message: "请输入充值费率",
      trigger: "blur",
    },
    {
      validator: checkPayRate,
      message: "请输入介于0和1之间的小数",
      trigger: "change", // 在失去焦点时进行验证，可以根据需要修改
    },
  ],
  recharge_fee_type: [
    {
      required: true,
      message: "请选择充值手续费扣除方式",
      trigger: "change",
    },
  ],
  deposit_amount_type: [
    {
      required: true,
      message: "请选择充值入账金额计算方式",
      trigger: "change",
    },
  ],
};

// 获取币种
const getCurrencyList = async () => {
  try {
    const res = await assetsCurrencyApi({});
    currencyList.value = res.data.results;
  } catch (error) {
    currencyList.value = [];
  }
};

// 提交
const submit = (dialogForm) => {
  dialogFormRef.value
    .validate()
    .then(async () => {
      try {
        const param = Object.assign({}, dialogForm);
        emits("submitForm", param);
      } catch (error) {
        console.log(error);
      }
    })
    .catch((error) => {
      console.log(error);
    });
};

onMounted(() => {
  getCurrencyList();
});
</script>
